<template>
	<view class="content">
		<!-- 选择时间 -->
		<view class="revenueTitle">
			<text>选择时间</text>
			<view class="selectTime">
				<picker class="pickerTime" mode="date" :value="startDate" @change="bindStartDateChange">
					<view class="uni-input">{{ startDate }}</view>
				</picker>
				<text class="partition">至</text>
				<picker class="pickerTime" mode="date" :value="endDate" @change="bindEndDateChange">
					<view class="uni-input">{{ endDate }}</view>
				</picker>
			</view>
			<view class="confirmClick" @click="confirm">查询</view>
		</view>

		<!-- 订单列表 -->
		<view class="orderContent">
			<view class="orderItem" v-for="(item, index) in orderInfo" :key="index">
				<view class="item">
					<view>
						用户昵称:
					</view>
					<view>
						{{item.nickname}}
					</view>
				</view>
				<view class="item">
					<view>
						付款金额:
					</view>
					<view>
						{{item.orderMoney}}
					</view>
				</view>
				<view class="item">
					<view>
						订单类型:
					</view>
					<view>
						{{item.orderType}}
					</view>
				</view>
				<view class="item">
					<view>
						支付类型:
					</view>
					<view>
						{{item.payType}}
					</view>
				</view>
				<view class="item" v-if="item.date">
				    <view>
				        预约时间:
				    </view>
				    <view>
				        {{ item.date }}
				    </view>
				</view>
				<view class="item">
					<view>
						支付时间:
					</view>
					<view>
						{{item.orderTime}}
					</view>
				</view>
			</view>
		</view>
		<!-- 合计金额 -->
		<view class="totalAmount">
			<text>合计: {{ totalAmount }}元</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDateRange({
				format: true
			})
			return {
				startDate: currentDate,
				endDate: currentDate,
				orderInfo: [],
				totalAmount: 0 // 用来存储合计金额
			}
		},
		onLoad() {
			this.$xyfun.storeId().then((store_id) => {
				this.$api.post({
					url: "/order/getMoneyOrderList",
					data: {
						store_id: store_id,
					},
					success: res => {
						console.log(res); // 打印原始返回的数据，查看它的结构

						// 假设 res.data 是你从接口返回的订单列表
						this.orderInfo = res.map(item => {
							return {
								nickname: item.nickname, // 昵称
								payType: item.pay_type,
								orderMoney: item.total_fee, // 订单金额
								date: item.date,
								orderTime: item.paytime, // 
								orderType: item.order_type // 订单类型
							};
						});
						// 计算合计金额
						this.totalAmount = this.orderInfo.reduce((sum, item) => sum + parseFloat(item
							.orderMoney), 0).toFixed(2);
					},
					fail: err => {
						console.error("请求失败:", err);
					}
				});
			});
		},
		computed: {
			startDateRange() {
				return this.getDateRange('start');
			},
			endDateRange() {
				return this.getDateRange('end');
			}
		},
		methods: {
			bindStartDateChange(e) {
				this.startDate = e.detail.value;
			},
			bindEndDateChange(e) {
				this.endDate = e.detail.value;
			},
			confirm() {
				// 获取选中的开始日期和结束日期
				console.log(`开始日期: ${this.startDate}, 结束日期: ${this.endDate}`);

				// 发送请求到后端获取数据
				this.$xyfun.storeId().then((store_id) => {
					this.$api.post({
						url: "/order/getMoneyOrderList", // 你的接口地址
						data: {
							store_id: store_id,
							start_date: this.startDate, // 开始日期
							end_date: this.endDate // 结束日期
						},
						success: res => {
							console.log(res); // 打印返回的数据，检查结构

							// 假设 res.data 是订单列表
							this.orderInfo = res.map(item => {
								return {
									nickname: item.nickname, // 昵称
									payType: item.pay_type,
									orderMoney: item.total_fee, // 订单金额
									date: item.date,
									orderTime: item.paytime, // 
									orderType: item.order_type // 订单类型
								};
							});
							// 计算合计金额
							this.totalAmount = this.orderInfo.reduce((sum, item) => sum + parseFloat(
								item
								.orderMoney), 0).toFixed(2);
						},
						fail: err => {
							console.error("请求失败:", err);
						}
					});
				});
			},
			getDateRange(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>


<style scoped lang="less">
	.content {
		background-color: #F4F4F4;
		min-height: 100vh;
		padding-bottom: 100rpx;
		/* 给底部留出空间 */
	}

	.revenueTitle {
		height: 89rpx;
		width: 100%;
		background-color: #fff;
		display: flex;
		font-size: 28rpx;
		align-items: center;
		justify-content: space-around;
		// font-weight: bold;
		padding: 10rpx 0;

		.selectTime {
			display: flex;
			align-items: center;
		}

		.partition {
			padding: 0 10rpx;
		}

		.pickerTime {
			border: 2rpx solid #cccccc;
			padding: 10rpx 20rpx;
			color: #000;
			font-weight: normal;
		}

		.confirmClick {
			width: 109rpx;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 10rpx;
			text-align: center;
			background-color: #65C61E;
			color: #fff;
		}
	}

	.orderContent {
		width: 90%;
		margin: 0 auto;

		.orderItem {
			padding: 20rpx 40rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin-top: 40rpx;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx 0;
			}
		}
	}

	/* 合计金额，固定在页面底部 */
	.totalAmount {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		text-align: center;
		padding: 20rpx 0;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		box-shadow: 0 -2rpx 5rpx rgba(0, 0, 0, 0.1);
		/* 给底部加个阴影，提升视觉效果 */
	}
</style>